<template>
    <div>
        <div class="bg"></div>
        <div class="main_body">
            <div class="title">
                <img class="title_img" src="../assets/img/title.png" alt="">
            </div>
            <div>
                <el-tabs v-model="activeName">
                    <el-tab-pane label="注册页面" name="register"></el-tab-pane>
                </el-tabs>
            </div>
            <div>
                <el-form status-icon ref="registerFormRef" :rules="rules" :model="registerForm">
                    <el-form-item prop="username">
                        <el-input prefix-icon="el-icon-user" placeholder="账号名" v-model="registerForm.username"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input  type="password" autocomplete="false" placeholder="密码" prefix-icon="el-icon-lock" v-model="registerForm.password"></el-input>
                    </el-form-item>
                    <el-form-item prop="pwd">
                        <el-input  type="password" autocomplete="false" placeholder="确认密码" prefix-icon="el-icon-lock" v-model="registerForm.pwd"></el-input>
                    </el-form-item>
                    <el-form-item prop="nickname">
                        <el-input prefix-icon="el-icon-picture-outline-round" @keyup.enter.native="register" placeholder="昵称" v-model="registerForm.nickname"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <div style="float: right">
                            <el-link  style="margin-right: 10px;font-size: 12px;" type="primary" @click="ToLogin" :underline="false">已有账号登录</el-link>
                            <el-link  style="font-size: 12px;" type="primary" :underline="false">忘记密码</el-link>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button  class="btnSure" type="primary" @click="register">确 定</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="copy">
                right © 2021 MoerTie2
                <br>
                浙ICP备20025128号-1
            </div>
        </div>
    </div>
</template>
<script src="../js/md5.js"></script>
<script>
    var md5 = require('md5')
    export default {
        data(){
            return {
                activeName: 'register',
                registerForm: {
                    username: '',
                    password: '',
                    nickname: '',
                    pwd:''
                },
                rules: {
                    username: [
                        { required: true, message: '请输入帐户名', trigger: 'blur' },
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        // { pattern: '^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$', message: '需同时含有数字和字母，且长度在6-16位之间' }
                    ],
                    pwd: [
                        { required: true, message: '请再次输入密码', trigger: 'blur' },
                        {
                            validator:(rule,value,callback)=>{
                                if(value===''){
                                    callback(new Error('请再次输入密码'))
                                }else if(value!==this.registerForm.password){
                                    callback(new Error('两次输入密码不一致'))
                                }else{
                                    callback( )
                                }
                            },
                            trigger:'blur'
                        }
                    ],
                    nickname: [
                        { required: true, message: '请输入昵称', trigger: 'blur' },
                    ]
                }
            }
        },
        created() {
        },
        methods: {
            async register(){
                // console.log(this.registerForm)
                if (this.registerForm.password && this.registerForm.username && this.registerForm.nickname){
                    if(this.registerForm.password === this.registerForm.pwd) {
                        var pass = this.registerForm.password
                        var user = this.registerForm.username
                        this.registerForm.password = md5(pass)
                        this.registerForm.pwd = md5(pass)
                        // console.log(this.registerForm)
                        const { data: res } = await this.$http.post('/user/register',this.registerForm)
                        console.log(res)
                        if (res.code !== 200){
                            return this.$message.error(res.msg)
                        }
                        this.$message.success('注册成功！')
                        this.$router.push({path:'/Login',query:{username:user}})
                    }
                    else{
                        this.$message.error('请再次确认密码,两次输入不一致')
                    }
                }
                else{
                    this.$message.error('注册信息填写不完整！')
                }
            },
            ToLogin(){
                this.$router.push('/Login')
            }
        }
    };
</script>


<style scoped>
    .bg{
        background: url(../assets/img/bg2.jpg);
        /*background-color: #F7F7F7;*/
        background-size: 100% 100%;
        height: 100%;
        opacity: 0.2;
        position: fixed;
        width: 100%;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }
    .main_body{
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .title_img{
        width: 192px;
        height: 64px;
    }
    .title{
        margin-top: 2vh;
    }
    /deep/.el-tabs__item {
        font-size: 11px;
    }
    /deep/.el-input__inner{
        width: 184px !important;
        height: 24px;
    }
    .btnSure{
        width: 184px !important;
        height: 24px;
    }
    .copy{
        color: rgba(0,0,0,.45);
        font-size: 6px;
        position: absolute;
        bottom: 10px;
        text-align: center;
    }
    /deep/.el-tabs__item.is-active {
        color: #26386a !important;
        font-size: 9px !important;
    }
    /deep/.el-tabs__item:hover {
        color: #26386a !important;
        cursor: pointer;
        font-size: 9px !important;
    }
</style>
